<template>
  <div class="about-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <div class="header-content">
          <div class="header-left">
            <h1 class="page-title">
              <el-icon class="title-icon"><InfoFilled /></el-icon>
              关于系统
            </h1>
            <p class="page-subtitle">了解智慧医疗服务平台的设计理念与技术实现</p>
          </div>
        </div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/portal' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>关于系统</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    
    <div class="container main-content">
      <!-- 项目简介 -->
      <section class="intro-section">
        <el-card class="section-card" shadow="hover">
          <template #header>
            <div class="section-header">
              <el-icon class="section-icon"><Setting /></el-icon>
              <h2 class="section-title">项目简介</h2>
            </div>
          </template>
          <div class="intro-content">
            <div class="intro-text">
              <p class="lead-text">
                智慧医疗服务平台是一个基于现代Web技术栈构建的综合性医疗信息管理系统。
                本项目旨在通过数字化手段提升医疗服务效率，改善患者就医体验，实现医疗资源的优化配置。
              </p>
              <p>
                平台采用前后端分离的架构设计，支持多角色用户体系，包括患者、医生、护士、药师和管理员等，
                为不同用户群体提供专业化、个性化的服务功能。通过智能化的业务流程设计，
                实现了从预约挂号到诊疗康复的全流程数字化管理。
              </p>
            </div>
            <div class="intro-image">
              <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" alt="智慧医疗" />
            </div>
          </div>
        </el-card>
      </section>

      <!-- 技术架构 -->
      <section class="tech-section">
        <el-card class="section-card" shadow="hover">
          <template #header>
            <div class="section-header">
              <el-icon class="section-icon"><Tools /></el-icon>
              <h2 class="section-title">技术架构</h2>
            </div>
          </template>
          <div class="tech-content">
            <div class="tech-stack">
              <div class="tech-category">
                <h3>前端技术</h3>
                <div class="tech-items">
                  <div class="tech-item">
                    <el-icon class="tech-icon"><Monitor /></el-icon>
                    <div class="tech-info">
                      <h4>Vue 3</h4>
                      <p>采用Vue 3框架，利用Composition API实现组件化开发</p>
                    </div>
                  </div>
                  <div class="tech-item">
                    <el-icon class="tech-icon"><Grid /></el-icon>
                    <div class="tech-info">
                      <h4>Element Plus</h4>
                      <p>基于Element Plus UI组件库，打造现代化用户界面</p>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="tech-category">
                <h3>后端技术</h3>
                <div class="tech-items">
                  <div class="tech-item">
                    <el-icon class="tech-icon"><Service /></el-icon>
                    <div class="tech-info">
                      <h4>Flask</h4>
                      <p>轻量级Python Web框架，提供灵活的API接口服务</p>
                    </div>
                  </div>
                  <div class="tech-item">
                    <el-icon class="tech-icon"><Lock /></el-icon>
                    <div class="tech-info">
                      <h4>JWT认证</h4>
                      <p>基于JSON Web Token的安全认证和授权机制</p>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="tech-category">
                <h3>数据存储</h3>
                <div class="tech-items">
                  <div class="tech-item">
                    <el-icon class="tech-icon"><Coin /></el-icon>
                    <div class="tech-info">
                      <h4>MongoDB</h4>
                      <p>NoSQL文档数据库，支持灵活的数据模型和高性能查询</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </section>

      <!-- 核心功能 -->
      <section class="features-section">
        <el-card class="section-card" shadow="hover">
          <template #header>
            <div class="section-header">
              <el-icon class="section-icon"><Star /></el-icon>
              <h2 class="section-title">核心功能</h2>
            </div>
          </template>
          <div class="features-content">
            <div class="features-grid">
              <div class="feature-item">
                <div class="feature-icon">
                  <el-icon><Calendar /></el-icon>
                </div>
                <h3>智能预约</h3>
                <p>支持在线预约挂号、科室选择、医生筛选，智能排班管理</p>
              </div>
              <div class="feature-item">
                <div class="feature-icon">
                  <el-icon><User /></el-icon>
                </div>
                <h3>多角色管理</h3>
                <p>患者、医生、护士、管理员等多角色权限体系</p>
              </div>
              <div class="feature-item">
                <div class="feature-icon">
                  <el-icon><Document /></el-icon>
                </div>
                <h3>电子病历</h3>
                <p>完整的电子病历系统，支持诊疗记录、检查报告管理</p>
              </div>
              <div class="feature-item">
                <div class="feature-icon">
                  <el-icon><Setting /></el-icon>
                </div>
                <h3>药品管理</h3>
                <p>药品库存管理、处方开具、用药指导等功能</p>
              </div>
            </div>
          </div>
        </el-card>
      </section>

      <!-- 开发信息 -->
      <section class="team-section">
        <el-card class="section-card" shadow="hover">
          <template #header>
            <div class="section-header">
              <el-icon class="section-icon"><User /></el-icon>
              <h2 class="section-title">开发信息</h2>
            </div>
          </template>
          <div class="team-content">
            <div class="project-info">
              <div class="info-item">
                <el-icon class="info-icon"><Folder /></el-icon>
                <div class="info-content">
                  <h3>项目类型</h3>
                  <p>软件工程创新实践课程设计</p>
                </div>
              </div>
              <div class="info-item">
                <el-icon class="info-icon"><Timer /></el-icon>
                <div class="info-content">
                  <h3>开发周期</h3>
                  <p>2024年12月 - 2025年1月</p>
                </div>
              </div>
              <div class="info-item">
                <el-icon class="info-icon"><Tools /></el-icon>
                <div class="info-content">
                  <h3>技术栈</h3>
                  <p>Vue3 + Flask + MongoDB + Element Plus</p>
                </div>
              </div>
              <div class="info-item">
                <el-icon class="info-icon"><Edit /></el-icon>
                <div class="info-content">
                  <h3>开发模式</h3>
                  <p>前后端分离 + RESTful API</p>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  InfoFilled, 
  Setting, 
  Tools, 
  Monitor, 
  Grid, 
  Service, 
  Lock, 
  Coin, 
  Star, 
  Calendar, 
  User, 
  Document, 
  Folder, 
  Timer, 
  Edit 
} from '@element-plus/icons-vue'

// 页面加载状态
const loading = ref(false)
</script>

<style scoped>
.about-page {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
  backdrop-filter: blur(10px);
  padding: 30px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 32px;
  color: #2c3e50;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.title-icon {
  margin-right: 12px;
  font-size: 36px;
  color: #1989fa;
}

.page-subtitle {
  font-size: 16px;
  color: #646566;
  margin: 0;
}

/* 主要内容区 */
.main-content {
  padding: 30px 0;
}

/* 通用卡片样式 */
.section-card {
  margin-bottom: 30px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  align-items: center;
}

.section-icon {
  font-size: 24px;
  color: #1989fa;
  margin-right: 10px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

/* 项目简介 */
.intro-content {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.intro-text {
  flex: 2;
}

.lead-text {
  font-size: 18px;
  line-height: 1.8;
  color: #2c3e50;
  margin-bottom: 20px;
  font-weight: 500;
}

.intro-text p {
  font-size: 16px;
  line-height: 1.8;
  color: #606266;
  margin-bottom: 15px;
}

.intro-image {
  flex: 1;
  text-align: center;
}

.intro-image img {
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* 技术架构 */
.tech-content {
  padding: 20px 0;
}

.tech-stack {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.tech-category h3 {
  font-size: 18px;
  color: #2c3e50;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f2f5;
}

.tech-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.tech-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.tech-item:hover {
  background: #e3f2fd;
  transform: translateY(-2px);
}

.tech-icon {
  font-size: 24px;
  color: #1989fa;
  flex-shrink: 0;
  margin-top: 2px;
}

.tech-info h4 {
  font-size: 16px;
  color: #2c3e50;
  margin: 0 0 8px;
  font-weight: 600;
}

.tech-info p {
  font-size: 14px;
  color: #606266;
  margin: 0;
  line-height: 1.5;
}

/* 核心功能 */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  padding: 20px 0;
}

.feature-item {
  text-align: center;
  padding: 30px 20px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.feature-item:hover {
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.feature-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1989fa, #42a5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}

.feature-icon .el-icon {
  font-size: 24px;
  color: white;
}

.feature-item h3 {
  font-size: 16px;
  color: #2c3e50;
  margin: 0 0 10px;
  font-weight: 600;
}

.feature-item p {
  font-size: 14px;
  color: #606266;
  margin: 0;
  line-height: 1.5;
}

/* 开发信息 */
.project-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  padding: 20px 0;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.info-item:hover {
  background: #e3f2fd;
  transform: translateY(-2px);
}

.info-icon {
  font-size: 24px;
  color: #1989fa;
  flex-shrink: 0;
}

.info-content h3 {
  font-size: 16px;
  color: #2c3e50;
  margin: 0 0 5px;
  font-weight: 600;
}

.info-content p {
  font-size: 14px;
  color: #606266;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .intro-content {
    flex-direction: column;
  }
  
  .tech-items {
    grid-template-columns: 1fr;
  }
  
  .features-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  
  .info-item {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

@media (max-width: 576px) {
  .container {
    padding: 0 15px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
}
</style> 